<template>
	<view>
		<view class="header">
			<view class="header_box">
				<view class="orderStatus">
					<view class="icon">
						<image src="https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/order_state.png"></image>
					</view>
					<view class="status_txt">{{order_info.status_txt}}</view>
				</view>
				<view class="addtess_box">
					<view class="userInfo">
						<text>{{order_info.name}}</text>
						<text>{{order_info.phone}}</text>
					</view>
					<view class="addressDetail">{{order_info.address}}</view>
				</view>
			</view>
		</view>
		<view @click="jumpPage(order_info.active_id)">
			<view class="goods_box">
				<view class="goods_img">
					<image :src="order_info.goods_image"></image>
				</view>
				<view class="goods_info">
					<view class="u-line-2">{{order_info.goods_name}}</view>
					<view class="price_box">
						<view>¥{{order_info.goods_price}}</view>
						<view>X{{order_info.num}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order_info">
			<view class="order_info_item">
				<view class="order_info_title">订单编号：</view>
				<view>{{order_info.order_no}}</view>
			</view>
			<view class="order_info_item">
				<view class="order_info_title">下单时间：</view>
				<view>{{order_info.create_time}}</view>
			</view>
			<view class="order_info_item" v-if="order_info.pay_status==2">
				<view class="order_info_title">支付方式：</view>
				<view>{{order_info.pay_type_txt}}</view>
			</view>
			<view class="order_info_item" v-if="order_info.pay_status==2">
				<view class="order_info_title">支付时间：</view>
				<view>{{order_info.pay_time}}</view>
			</view>
		</view>
		<view class="order_info">
			<view class="order_info_item order_price">
				<view class="order_info_title">商品总额：</view>
				<view>¥{{order_info.total_price}}</view>
			</view>
			<view class="order_info_item order_price">
				<view class="order_info_title">运费：</view>
				<view>¥{{order_info.express_price}}</view>
			</view>
			<view class="order_info_item order_price">
				<view class="order_info_title">实付款：</view>
				<view style="color: #FA3534;">¥{{order_info.pay_price}}</view>
			</view>
		</view>
		<view class="navigation">
			<view class="right" v-for="(btn_item,btn_idx) in order_info.button">
				<view style="margin-left: 10rpx;" class="buy btn u-line-1" @click="toPage(btn_item.sign)">{{btn_item.name}}</view>
			</view>
		</view>
		<u-modal v-model="show"  :show-cancel-button="true" :content="msg" @cancel="cancel" @confirm="confirm"></u-modal>
		<u-modal v-model="modalShow" :show-cancel-button="true" title="支付方式"
			:cancel-style="{color:'#909399'}" @confirm="payConfirm">
			<view class="slot-content">
				<view class="payTime">
					<view>支付剩余时间：</view>
					<view>
						<u-count-down :font-size="25" color="#909399" 
							:separator-size="25" separator-color="#909399"
						:timestamp="3000"></u-count-down>
					</view>
				</view>
				<view class="modelPrice">¥{{order_info.pay_price}}
				</view>
				<u-cell-group :border="false">
					<u-cell-item :border-bottom="false" icon="weixin-fill" :icon-style="{color:'#1AAE0B'}" 
					:icon-size="60" title="微信支付" :arrow="false">
						<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
							<u-radio name="weixin" :icon-size="40">
							</u-radio>
						</u-radio-group>
					</u-cell-item>
					<u-cell-item :border-bottom="false" icon="zhifubao" :icon-style="{color:'#1393E8'}"
					:icon-size="50" title="支付宝支付" :arrow="false">
						<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
							<u-radio name="zhifubao" :icon-size="40">
							</u-radio>
						</u-radio-group>
					</u-cell-item>
				</u-cell-group>
			</view>
		</u-modal>
		<hoverMenu></hoverMenu>
	</view>
</template>

<script>
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	import {timeLimitedOrderDetail,timeLimitedCancel,timeLimitedGoPay,timeLimitedReceipt,wxminiGetOpenid,timeLimitedGoPayGzh,WxTimeLimitedGoPay} from "@/common/api.js";
	export default {
		components: {
			hoverMenu
		},
		data() {
			return {
				show:false,
				order_id:"",
				order_info:{},
				modalShow:false,
				payType:"weixin",
				msg:"",
				sign:""
			}
		},
		onLoad(options) {
			this.order_id = options.order_id;
		},
		onShow() {
			this.selectOrderDetail();
		},
		methods: {
			floatTouchClick(index){
				this.$uniApi.floatTouch(index);
			},
			selectOrderDetail(){
				timeLimitedOrderDetail(this,{order_id:this.order_id})
			},
			toPage(sign){
				if(sign == "pay"){
					//支付
					var _this = this;
					// #ifdef MP-WEIXIN
					if(uni.getStorageSync("openid")==""){
						console.log(uni.getStorageSync("openid")+"---2===openid")
						uni.getSetting({
							success: function (a) {
								uni.getUserProfile({
									desc:'Wexin',  
									success: function (b) {
										 uni.login({
										    success (res) {
										        if (res.code) {
													wxminiGetOpenid(_this,{code:res.code})
										        } else {
													vm.$u.toast("授权获取失败"); 
										        }
										    }
										})
									}
								});
							}
						});
					}
					if(uni.getStorageSync("openid")!="" && uni.getStorageSync("openid")!="undefined"){
						_this.modalShow = true;
					}
					// #endif
					// #ifdef APP-PLUS
						_this.modalShow = true;
					// #endif
					// #ifdef H5
						let ua = window.navigator.userAgent.toLowerCase()
						if (ua.match(/MicroMessenger/i) == 'micromessenger') {
							timeLimitedGoPayGzh(_this,{pay_type:'wx_chat',order_id:_this.order_id,type:1})
						}
					// #endif
				}else if(sign == "cancel"){
					//取消订单
					this.msg = "您确定要取消此订单吗？";
					this.sign = sign;
					this.show = true;
				}else if(sign == "refund"){
					//售后
					uni.navigateTo({
						url:"/seckill/afterSale?time_order_id="+this.order_id
					})
				}else if(sign == "delivery"){
					//查看物流
					uni.navigateTo({
						url:"/user/logistics?order_id="+this.order_id+"&type=2"
					})
				}else if(sign == "receipt"){
					//确认收货
					this.msg = "您确定要收货吗？";
					this.sign = sign;
					this.show = true;
				}
			},
			confirm(){
				this.show = false;
				if(this.sign == "cancel"){
					timeLimitedCancel(this,{order_id:this.order_id,type:1})
				}else if(this.sign == "receipt"){
					timeLimitedReceipt(this,{order_id:this.order_id,type:1})
				}
			},
			cancel(){
				this.show = false;
			},
			radioChange(e) {
				this.payType = e;
			},
			payConfirm(){
				//微信支付
				if(this.payType == 'weixin'){
					// #ifdef MP-WEIXIN
					timeLimitedGoPay(this,{pay_type:'wx_mini',order_id:this.order_id,type:1})
					// #endif
					// #ifdef APP-PLUS
					WxTimeLimitedGoPay(this,{pay_type:'wx_app',order_id:this.order_id,type:1})
					// #endif
				}
			},
			jumpPage(id){
				uni.navigateTo({
				  url: '/seckill/goodsDetail?id='+id
				});
			}
		}
	}
</script>

<style>
	page{
		font-family: PingFang SC;
		background: #f6f6f6;
	}
	.header{
		background: #FFFFFF;
		height: 350rpx;
	}
	.header_box{
		background: linear-gradient(0deg, #6de3e9, #a0edf1) no-repeat;
		background-size: 100% 200rpx;
		height: 200rpx;
	}
	.orderStatus{
		display: flex;
		padding: 20rpx 60rpx;
	}
	.icon{
		width: 100rpx;
		height: 100rpx;
	}
	.icon image{
		width: 100%;
		height: 100%;
	}
	.status_txt{
		margin-left: 10rpx;
		font-size: 40rpx;
		font-weight: 700;
		line-height: 100rpx;
		color: #FFFFFF;
	}
	.addtess_box{
		background-color: #FFFFFF;
		height: 200rpx;
		margin-left: 50rpx;
		margin-right: 50rpx;
		border-radius: 20rpx;
		padding: 20rpx;
	}
	.userInfo{
		font-size: 35;
		font-weight: 700;
	}
	.userInfo text{
		margin-left: 20rpx;
	}
	.addressDetail{
		margin: 20rpx;
		color: #909399;
	}
	.goods_box{ 
		background-color: #FFFFFF;
		margin-top: 20rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
	}
	.goods_img{
		width: 200rpx;
		height: 200rpx;
	}
	.goods_img image{
		width: 100%;
		height: 100%;
	}
	.goods_info{
		margin-left: 10rpx;
		width: 500rpx;
	}
	.goods_norms{
		margin-top: 20rpx;
		font-size: 25rpx;
		color: #909399;
	}
	.price_box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		height: 50rpx;
	}
	.btn_part{
		background-color: #FFFFFF;
		display: flex;
		justify-content: flex-end;
	}
	.btn_part view{
		margin-left: 20rpx;
	}
	.order_info{
		background-color: #FFFFFF;
		margin-top: 20rpx;
		padding:  20rpx;
	}
	.order_info_item{
		display: flex;
		margin-bottom: 15rpx;
	}
	.order_info_title{
		color: #909399;
	}
	.order_price{
		display: flex;
		justify-content: space-between;
	}
	.payTime{
		padding: 0 40rpx;
		color: #909399;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
	}
	.modelPrice{
		color: #FA3534;
		font-size: 50rpx;
		font-weight: 650;
		padding: 0 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	</style>
	<style lang="scss" scoped>
	.navigation {
		display: flex;
		margin-top: 100rpx;
		background-color: #ffffff;
		padding: 16rpx 16rpx;
		width: 750rpx;
		position: fixed;
		bottom: 0;
		z-index: 10;
		justify-content: flex-end;
		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;
			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
				text-align: center;
			}
			.buy {
				background: linear-gradient(90deg,#13797f,#20cbd4);
			}
		}
	}
</style>
